.container{
  height: 270px;
  width: 100%;
  display: flex;
  margin-top: 10px;
  .left {
    overflow: auto;
    margin-left: 2%;
    height: 270px;
    width: 65%;
    .box{
      margin-top: 2px;
      background: white;
      // padding-left: 10px;
      padding: 9px;
      // border-bottom: 1px grey solid;
      height: 20%;
      .content_top{
        .name{
          margin-right: 10%;
          font-size: 20px;
          font-weight: bold;
          float: left;
        }
        .add{
          float: right;
        }
      }
      .remark{
        color: rgb(201,205,212);
      }
    }
    .box:hover{
      box-shadow: 5px 5px 5px #ccc,-5px 0px 5px #ccc;
      transform: translateY(-5px);
    }
  }
  .right{
    margin-left: 2%;
    height: 270px;
    width: 30%;
    // border: 1px solid black;
    border-radius: 4px;
    background: rgb(248,248,248);
    margin-left: 10px;
    .box{
        width: 100%;
        height: 270px;
        .title{
            font-weight: bold;
            font-size: 20px;
            margin:4%;
        }
        .genre{
            // border-bottom: 1px solid grey;
            height: 40px;
            width: 100%;
            padding-left: 20px;
            .con{
                display: flex;
                .genrenumber{
                    font-weight: bold;
                    font-size: 20px;
                    color: rgb(255,24,62);
                }
                .genrename{
                    font-weight: bold;
                    font-size: 20px;
                }
            }
        }
    }

}
}